import React from 'react';

function UserGreeting(props) {
    return <h1>Welcome back!</h1>
}
function GuestGreeting(props) {
    return <h1>please sign up.</h1>
}

function Greeting (props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <UserGreeting />
    } else {
        return <GuestGreeting />
    }
}

function LoginButton(props) {
    console.log(props);
    
    return <button onClick={props.onClick}>Login</button>
}
function LoginOutButton(props) {
    console.log(props);
    return <button onClick={props.onClick}>Loginout</button>
}
class Conditioner extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isLogin: false,
        }
    }
    handleLoginClick() {
        this.setState({
            isLoggedIn: true,
        })
    }
    handleLogoutClick() {
        this.setState({
            isLoggedIn: false
        })
    }
    

    render() {
      const {isLoggedIn} = this.state;
      let button;
      if (isLoggedIn) {
        button = <LoginButton onClick={this.handleLogoutClick.bind(this)} />
      } else {
        button = <LoginOutButton onClick={this.handleLoginClick.bind(this)} />
      }
      return <div>
        <Greeting isLoggedIn={this.state.isLogin} />
        {
          button
        }
      </div>;
    }
  }


  export default Conditioner;